<template>
    <div class="my-starts">
        <el-row>
            <el-col :span="24">
                <div class="title">我的申请</div>
            </el-col>
        </el-row>
        <el-tabs v-model="activeTab" type="border-card" size="small">
            <el-tab-pane name="leave" style="min-height: 270px;">
                <template #label>请假申请</template>
                <my-leave-record/>
            </el-tab-pane>
            <el-tab-pane name="evection" style="min-height: 270px;">
                <template #label>出差申请</template>
                <my-evection-record/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import {getMyStarts} from "../../../network/process/flowable-general";
import PersonalLeaveRecord from "../../activiti/record/PersonalLeaveRecord.vue";
import MyLeaveRecord from "./comps/MyLeaveRecord.vue";
import MyEvectionRecord from "./comps/MyEvectionRecord.vue";

export default {
    name: "MyStarts",
    components: {MyEvectionRecord, MyLeaveRecord, PersonalLeaveRecord},
    data(){
        return{
            activeTab: 'leave',
            startsData: []
        }
    },
    methods: {
        loadMyStarts(){
            let userId = this.$store.state.loginUser.id;
            getMyStarts(userId).then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        this.startsData = vo.data;
                    },
                    log: '我发起的流程'
                })
            })
        }
    },
    created() {
    },
    watch: {
        '$store.state.loginUser.id'(){
            this.loadMyStarts();
        }
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.my-starts{
    width: 100%;
    height: 100%;
    background: white;
    box-sizing: border-box;
    padding: 10px;
}
.title{
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    text-indent: 4px;
}
</style>